<template>
    <div v-if="!item.hidden" class="side-bar-item">
        <router-link v-if="checkRouteType(item) === 'link'" :to="wrapRouterLink(item)" replace>
            <el-menu-item :index="item.menuName || wrapRouterPath(item.routerName)">
                <div class="menu-right" :title="item.menuName">
                    <i v-if="showIcon(item)" :class="item.menuIcon" class="menu-icon"></i>
                    <span v-if="item.menuName">{{ item.menuName }}</span>
                </div>
            </el-menu-item>
        </router-link>
        <!-- category 为1时 才进入 -->
        <el-submenu
            v-else-if="checkRouteType(item) === 'sub' && item.category==='1'"
            prpper-class="item-li-menu"
            ref="submenu"
            :index="item.menuName || item.routerName"
            :title="item.menuName"
            class="menu-icon-li"
            @click.native="handleSubmenu"
        >
            <template slot="title">
                <div class="menu-right">
                    <i v-if="showIcon(item)" :class="item.menuIcon" class="menu-icon"></i>
                    <span v-if="item.menuName&&!sideBarCollapse" slot="title">{{ item.menuName }}</span>
                </div>
            </template>
            <template v-for="items in item.child">
                <span v-if="checkRouteType(items) === 'link'" :key="items.menuName" replace>
                    <el-menu-item :index="wrapRouterPath(items.routerName)">
                        <div class="menu-right" :title="items.menuName">
                            <i v-if="showIcon(items)" :class="items.menuIcon" class="menu-icon"></i>
                            <span v-if="items.menuName">{{ items.menuName }}</span>
                        </div>
                    </el-menu-item>
                </span>
                <!-- <router-link v-if="checkRouteType(items) === 'link'" :key="items.menuName"
                     :to="wrapRouterLink(items)" replace>
                            <el-menu-item :index="wrapRouterPath(items.routerName)" >
                                <div class="menu-right" :title="items.menuName">
                                    <i v-if="showIcon(items)" :class="items.menuIcon" class="menu-icon"> </i>
                                    <span v-if="items.menuName">
                                        {{ items.menuName }}
                                    </span>
                                </div>
                            </el-menu-item>
                </router-link>-->
                <el-submenu
                    v-if="checkRouteType(items) === 'sub' "
                    :key="items.menuName"
                    :index="items.menuName || items.routerName"
                    :title="items.menuName"
                    class="menu-icon-li"
                >
                    <template slot="title">
                        <i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
                        <span v-if="items.menuName" slot="title">{{ items.menuName }}</span>
                    </template>
                    <template v-for="itemsChild in items.child">
                        <side-bar-items :itemsChild="itemsChild" :key="itemsChild.menuName"></side-bar-items>
                    </template>
                </el-submenu>
            </template>
        </el-submenu>
    </div>
</template>

<script>
import { isEmpty } from '@/utils/Common';
import { eachProp } from '@/utils/Object';
import { mapState, mapGetters } from 'vuex';
import SideBarItems from './SideBarItems'
export default {
    name: 'SideBarItem',
    data() {
        return {
            divLeft: '',
            iswindow: false,
        };
    },
    props: {
        item: {
            type: Object,
            required: true,
        },

    },
    components: {
        SideBarItems
    },
    computed: {
        ...mapState({
            sideBarCollapse: state => state.menu.sideBarCollapse, //用来判断菜单 展开，（true）缩放
        }),
        // 取出侧边导航的宽
        ...mapGetters([
            'sideBarItemWidth',
        ]),
    },
    mounted() {
        const that = this;
        window.onresize = () => {
            that.iswindow = true; //判断是否是窗口改变事件
            let submenuDiv = that.$refs.submenu;
            if (submenuDiv) {
                submenuDiv.popperElm.style.left = (that.divLeft === '') ? that.sideBarItemWidth + 'px' : that.divLeft + 'px';
            }
        }
    },
    methods: {
        // 修改侧边栏的浮框位置
        handleSubmenu(iswindow) {
            let submenuDiv = this.$refs.submenu;
            let divTop = submenuDiv.popperElm.style.top;
            divTop = divTop.replace('px', '');
            let divleft = submenuDiv.popperElm.style.left;
            divleft = divleft.replace('px', '');
            if (!iswindow) {
                this.divLeft = divleft;
            }

            submenuDiv.popperElm.style.top = divTop * 1 - 60 + 'px';
            submenuDiv.popperElm.style.left = (divleft * 1) + (this.sideBarItemWidth * 1) + 'px';
            submenuDiv.popperElm.style.maxHeight = "70vh";
            submenuDiv.popperElm.style.overflowY = "auto";
            submenuDiv.popperElm.setAttribute("current", "menuleft");
        },

        showIcon(item) {
            return item.menuIcon && !isEmpty(item.menuIcon);
        },
        // 检查某个路由节点是叶子菜单还是非叶子菜单（叶子菜单：可以直接点击路由到某个链接）
        checkRouteType(route) {
            // 如果没有子路由，则一定是叶子菜单
            if (!route.child || route.child.length === 0) {
                return 'link';
            }

            // 如果具有子路由，检查子路由中非隐藏路由的个数
            let flag = 0;
            eachProp(route.child, (child) => {
                if (!child.hidden) {
                    flag += 1;
                }
            });

            if (flag === 0) {
                // 如果子路由都是隐藏路由，则父路由显示为叶子菜单
                return 'link';
            }
            // console.log('route.name'+route.menuName);
            return 'sub';
        },
        wrapRouterLink(item) {

            const route = {
                params: {
                    jumpFlag: true,
                },
            };

            if (item.name) {
                route.name = item.name;
            } else if (item.routerName) {
                route.path = this.wrapRouterPath(item.routerName);
            } else {
                route.path = '/404';
            }

            return route;
        },
        wrapRouterPath(path) {
            if (isEmpty(path)) {
                return '';
            }
            if (path.charAt(0) !== '/') {
                return `/${path}`;
            }
            return path;
        },
    },
};
</script>

<style lang="scss">
a li {
    .menu-right {
        padding-left: 10px;
        font-size: 15px;
    }
}
// 当折叠的时候此箭头图标隐藏
.el-menu--collapse .el-submenu__title {
    // 隐藏内容
    span {
        display: none;
    }
    .el-icon-arrow-right {
        display: none;
    }
}
.side-bar-item {
    .menu-icon {
        color: #a7b0c6;
        font-weight: 500;
        font-size: 20px;
        // 当折叠的时候此箭头图标隐藏
        + .el-icon-arrow-right {
            display: none;
        }
    }
    .el-submenu__title,
    > a > li {
        color: #fff;
        // background-color: #fff !important;
        font-weight: 500;
        font-size: 16px;
        text-align: right;
        &:hover {
            color: #fff;
            // background-color: rgba(53, 120, 246, 0.2) !important;
            // text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
            .menu-icon {
                color: #fff;
            }
        }
        > .menu-right {
            text-align: left;
            padding-left: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            font-size: 15px;
            // opacity: 0.5;
        }
    }

    .el-submenu {
        .el-menu-item {
            margin: 4px 20px;
            height: 40px;
            line-height: 40px;
            border-radius: 50px;

            &.is-active {
                background: #3578f6 !important;
            }
            &:hover {
                background-color: rgba(53, 120, 246, 0.2) !important;
            }
        }
    }
}
.el-menu--vertical {
    ul.el-menu {
        padding-top: 15px;
        padding-bottom: 20px;
    }
    .side-bar-item {
        .el-menu-item {
            height: 46px;
            line-height: 46px;
            padding: 0 30px;
            min-width: 200px;
            font-size: 16px;

            &:hover {
                // background-color: #fff !important;
                color: #4780fe;
            }
        }
    }
    .menu-icon-li {
        &.is-active {
            > .el-submenu__title {
                color: #4780fe;
                i {
                    color: #4780fe;
                    font-size: 16px;
                    font-weight: 800;
                }
                span {
                    padding-bottom: 6px;
                    border-bottom: 3px solid #4780fe;
                }
            }
            .router-link-active {
            }
        }
        .el-submenu__title {
            height: 46px;
            line-height: 46px;
            padding: 0 30px;
            min-width: 200px;
            font-size: 15px;
            background-color: #fff !important;
            i {
                font-size: 16px;
                font-weight: 800;
            }
            span {
                margin-left: 30px;
            }
            .el-submenu__icon-arrow {
                left: 20px;
                right: auto;
            }
            .el-icon-arrow-right {
                display: none;
            }
        }
    }
    .el-menu--popup .el-submenu {
        .el-menu--vertical {
            position: static !important;
            // display: block !important;
            overflow: hidden;
            &:hover {
                display: block !important;
            }
            ul.el-menu {
                padding-top: 10px;
                background-color: transparent !important;
                border: 0;
                box-sizing: inherit;
            }
            .el-menu--popup-right-start {
                margin-left: 0;
                & > .side-bar-item > a > .el-menu-item {
                    padding-left: 15px;
                }
            }
            .side-bar-item .el-menu-item {
                height: 46px;
                line-height: 46px;
                padding: 0 25px 0 40px;
                margin-left: 30px;
                min-width: 200px;
                span {
                    font-size: 14px;
                }
            }
        }
    }
}
.el-menu--horizontal .el-menu .el-menu-item {
    color: #2b2c2f;
}
</style>
